import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id:  root
    visible: true
    width: 600
    height: 400
    title: "SQLite TableView 示例"

    // 属性定义
    property int selectedRow: -1
    property int hoveredRow: -1
    readonly property int columnWidth: width/3 - 5
    readonly property int rowHeight: 30
    property bool editMode: false

    // 颜色定义
    readonly property color headerColor: "#2196F3"
    readonly property color selectedColor: "#bbdefb"
    readonly property color hoverColor: "#e3f2fd"
    readonly property color borderColor: "#e0e0e0"

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 6

        // 为表头留出空间
        spacing: 40

        // 操作栏
        RowLayout {
            Layout.minimumHeight: 40
            Layout.fillWidth: true

            Button { text: "新增"; onClicked: addDialog.addData() }
            Button { text: "删除"; onClicked: sqlModel.removeRow(selectedRow) }
            Button { text: "修改"; onClicked: addDialog.editData() }
            Button { text: "保存"; onClicked: sqlModel.saveAll() }
        }

        TableView {
            id: table

            // 填满剩余位置
            Layout.fillHeight: true
            Layout.fillWidth: true

            // 表头组件，绑定TableView， 放在表格上方
            HorizontalHeaderView {
                syncView: table
                height: 30
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.top
                resizableColumns: true
            }

            // 单选
            selectionMode: TableView.SingleSelection

            // 绑定模型
            model: sqlModel

            // 自定义单元格
            delegate: Rectangle {
                implicitWidth: columnWidth
                implicitHeight: rowHeight
                color: row === selectedRow ? selectedColor :
                                             row === hoveredRow ? hoverColor : row % 2 ? "#f5f5f5" : "white"

                // 处理鼠标事件
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: selectedRow = row
                    onEntered: hoveredRow = row
                    onExited: hoveredRow = -1
                }

                // 行分隔线
                Rectangle {
                    width: parent.width
                    height: 1
                    color: borderColor
                    anchors.bottom: parent.bottom
                }

                // 表格内容
                Text {
                    anchors.centerIn: parent
                    text: model.display
                    color: "#333"
                }
            }
        }

    }

    Dialog {
        id: addDialog
        modal: true
        anchors.centerIn: parent
        standardButtons: Dialog.Ok | Dialog.Cancel

        ColumnLayout {
            anchors.fill: parent
            Text { id: titleF; text: editMode? "修改" : "新增" }
            TextField { id: nameF; Layout.fillWidth: true; placeholderText: "name" }
            TextField { id: ageF;  Layout.fillWidth: true; placeholderText: "age" }
        }

        function addData() {
            editMode = false
            addDialog.open()
        }

        function editData() {
            if (selectedRow < 0) {
                console.log("selectedRow < 0 !")
                return
            }
            editMode = true
            nameF.text = sqlModel.cell(selectedRow, 1)
            ageF.text = sqlModel.cell(selectedRow, 2)
            addDialog.open()
        }

        onAccepted: {
            if (editMode) {
                sqlModel.editRow(selectedRow, nameF.text, parseInt(ageF.text) )
            } else {
                sqlModel.appendRow(nameF.text, parseInt(ageF.text) )
            }
        }
    }
}
